<template>
  <div class="digital-archive-container">
    <!-- 页面头部区域 -->
    <div class="digital-archive-header">
      <div class="header-content">
        <div class="ancient-title">纸质档案数字化</div>
        <div class="header-subtitle">传承千年档案 · 数字化管理新纪元</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">📝</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <ScanOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card scan-stat">
            <div class="stat-icon">
              <ScanOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">已扫描文件</div>
              <div class="stat-value">{{ digitalStats.scannedFiles }}</div>
              <div class="stat-label">万份档案</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card ocr-stat">
            <div class="stat-icon">
              <EyeOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">OCR识别率</div>
              <div class="stat-value">{{ digitalStats.ocrAccuracy }}%</div>
              <div class="stat-label">平均识别率</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card classify-stat">
            <div class="stat-icon">
              <AppstoreOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">分类档案</div>
              <div class="stat-value">{{ digitalStats.classifiedFiles }}</div>
              <div class="stat-label">已分类</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card tag-stat">
            <div class="stat-icon">
              <TagsOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">标签数量</div>
              <div class="stat-value">{{ digitalStats.totalTags }}</div>
              <div class="stat-label">检索标签</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <ScanOutlined class="section-icon" />
        数字化功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 扫描文件管理 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/digital-archive/scan-management')">
            <div class="module-header">
              <div class="module-icon">
                <ScanOutlined />
              </div>
              <div class="module-title">扫描文件管理</div>
            </div>
            <div class="module-description">管理纸质档案的扫描任务，监控扫描进度，处理扫描质量问题</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">今日扫描：</span>
                <span class="stat-value">{{ moduleStats.scanManagement.todayScans }}份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">扫描队列：</span>
                <span class="stat-value">{{ moduleStats.scanManagement.queueCount }}份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">扫描质量：</span>
                <span class="stat-value">{{ moduleStats.scanManagement.qualityScore }}分</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- OCR文字识别 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/digital-archive/ocr-recognition')">
            <div class="module-header">
              <div class="module-icon">
                <EyeOutlined />
              </div>
              <div class="module-title">OCR文字识别</div>
            </div>
            <div class="module-description">使用AI技术对扫描的档案图片进行文字识别，支持古文和现代文混合识别</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">今日识别：</span>
                <span class="stat-value">{{ moduleStats.ocrRecognition.todayRecognized }}万字</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">识别准确率：</span>
                <span class="stat-value">{{ moduleStats.ocrRecognition.accuracy }}%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">处理速度：</span>
                <span class="stat-value">{{ moduleStats.ocrRecognition.speed }}页/分钟</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 档案分类整理 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/digital-archive/classification')">
            <div class="module-header">
              <div class="module-icon">
                <AppstoreOutlined />
              </div>
              <div class="module-title">档案分类整理</div>
            </div>
            <div class="module-description">根据档案内容自动分类，建立档案层次结构，方便检索和管理</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">分类体系：</span>
                <span class="stat-value">{{ moduleStats.classification.categories }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">已分类：</span>
                <span class="stat-value">{{ moduleStats.classification.classified }}万份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">自动化率：</span>
                <span class="stat-value">{{ moduleStats.classification.autoRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 检索标签设置 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/digital-archive/tag-setting')">
            <div class="module-header">
              <div class="module-icon">
                <TagsOutlined />
              </div>
              <div class="module-title">检索标签设置</div>
            </div>
            <div class="module-description">为档案设置关键词标签，建立标签体系，提升档案检索效率</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">标签总数：</span>
                <span class="stat-value">{{ moduleStats.tagSetting.totalTags }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">热门标签：</span>
                <span class="stat-value">{{ moduleStats.tagSetting.popularTags }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">标签覆盖率：</span>
                <span class="stat-value">{{ moduleStats.tagSetting.coverage }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 数字化进度概览 -->
    <div class="progress-overview-section">
      <h3 class="section-title">
        <BarChartOutlined class="section-icon" />
        数字化进度概览
      </h3>

      <div class="progress-cards">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="8" v-for="progress in digitalizationProgress" :key="progress.id">
            <div class="progress-card">
              <div class="progress-header">
                <div class="progress-title">{{ progress.title }}</div>
                <div class="progress-percentage">{{ progress.percentage }}%</div>
              </div>

              <div class="progress-bar-container">
                <a-progress :percent="progress.percentage" :status="progress.status" :stroke-color="progress.color" :show-info="false" />
              </div>

              <div class="progress-details">
                <div class="detail-item">
                  <span class="detail-label">总数：</span>
                  <span class="detail-value">{{ progress.total }}万份</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">已完成：</span>
                  <span class="detail-value">{{ progress.completed }}万份</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">剩余：</span>
                  <span class="detail-value">{{ progress.remaining }}万份</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 最新数字化动态 -->
    <div class="digital-dynamics-section">
      <h3 class="section-title">
        <NotificationOutlined class="section-icon" />
        最新数字化动态
      </h3>

      <div class="dynamics-list">
        <a-list
          :data-source="digitalDynamics"
          :pagination="{
            pageSize: 6,
            showSizeChanger: false
          }"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="dynamics-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="dynamics-description">{{ item.description }}</div>
                  <div class="dynamics-meta">
                    <span class="dynamics-time">{{ item.time }}</span>
                    <span class="dynamics-operator">操作人：{{ item.operator }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>

    <!-- 快速操作面板 -->
    <div class="quick-actions-section">
      <a-card title="快速操作" :bordered="false">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-button type="primary" block @click="quickScan">
              <ScanOutlined />
              开始扫描
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="quickOCR">
              <EyeOutlined />
              批量识别
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="quickClassify">
              <AppstoreOutlined />
              自动分类
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="quickTag">
              <TagsOutlined />
              标签管理
            </a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  HomeOutlined,
  FolderOutlined,
  ScanOutlined,
  EyeOutlined,
  AppstoreOutlined,
  TagsOutlined,
  BarChartOutlined,
  NotificationOutlined,
  ToolOutlined,
  GlobalOutlined,
  FileTextOutlined,
  FilterOutlined,
  DatabaseOutlined,
  HeartOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 数字化统计信息
const digitalStats = reactive({
  scannedFiles: 112.5,
  ocrAccuracy: 96.8,
  classifiedFiles: 108.3,
  totalTags: 15672
})

// 模块统计信息
const moduleStats = reactive({
  scanManagement: {
    todayScans: 2456,
    queueCount: 892,
    qualityScore: 9.3
  },
  ocrRecognition: {
    todayRecognized: 156.7,
    accuracy: 96.8,
    speed: 45
  },
  classification: {
    categories: 156,
    classified: 108.3,
    autoRate: 89
  },
  tagSetting: {
    totalTags: 15672,
    popularTags: 234,
    coverage: 92
  }
})

// 数字化进度数据
const digitalizationProgress = ref([
  {
    id: 1,
    title: '生死记录数字化',
    percentage: 92,
    total: 156.8,
    completed: 144.3,
    remaining: 12.5,
    status: 'normal',
    color: '#52c41a'
  },
  {
    id: 2,
    title: '业力档案数字化',
    percentage: 87,
    total: 298.5,
    completed: 259.7,
    remaining: 38.8,
    status: 'normal',
    color: '#1890ff'
  },
  {
    id: 3,
    title: '审判记录数字化',
    percentage: 95,
    total: 89.2,
    completed: 84.7,
    remaining: 4.5,
    status: 'normal',
    color: '#722ed1'
  },
  {
    id: 4,
    title: '轮回档案数字化',
    percentage: 78,
    total: 445.7,
    completed: 347.6,
    remaining: 98.1,
    status: 'normal',
    color: '#fa8c16'
  },
  {
    id: 5,
    title: '功德记录数字化',
    percentage: 85,
    total: 287.5,
    completed: 244.4,
    remaining: 43.1,
    status: 'normal',
    color: '#eb2f96'
  },
  {
    id: 6,
    title: '仙官档案数字化',
    percentage: 98,
    total: 12.9,
    completed: 12.6,
    remaining: 0.3,
    status: 'normal',
    color: '#13c2c2'
  }
])

// 最新数字化动态
const digitalDynamics = ref([
  {
    id: 1,
    title: '第五殿阎王殿档案扫描完成',
    description: '完成第五殿阎王殿提交的3.2万份审判档案扫描工作，图像质量优秀，准备进入OCR识别阶段',
    type: '扫描完成',
    time: '1小时前',
    operator: '扫描员张三丰',
    icon: 'ScanOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 2,
    title: 'OCR识别算法优化升级',
    description: '古文识别算法升级至v5.2版本，对汉代以前古文识别率提升至98.5%，处理速度提升30%',
    type: '算法优化',
    time: '3小时前',
    operator: '技术专家李时珍',
    icon: 'EyeOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 3,
    title: '新增AI智能分类规则',
    description: '基于机器学习的档案分类系统新增128条分类规则，覆盖更多特殊案例，自动化率提升至89%',
    type: '分类升级',
    time: '5小时前',
    operator: '分类专家孔子',
    icon: 'AppstoreOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 4,
    title: '建立轮回专题标签体系',
    description: '针对轮回转世相关档案建立专门标签体系，包含567个专业标签，提升检索精确度',
    type: '标签体系',
    time: '8小时前',
    operator: '标签专家老子',
    icon: 'TagsOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 5,
    title: '大规模档案数字化项目启动',
    description: '启动"万年档案数字化"项目，预计处理50万份历史档案，项目周期12个月',
    type: '项目启动',
    time: '1天前',
    operator: '项目经理王阳明',
    icon: 'BarChartOutlined',
    avatarColor: '#13c2c2',
    tagColor: 'cyan'
  },
  {
    id: 6,
    title: '档案质量检查完成',
    description: '完成本月档案数字化质量检查，扫描质量合格率99.2%，OCR识别准确率96.8%',
    type: '质量检查',
    time: '2天前',
    operator: '质检员庄子',
    icon: 'ScanOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  },
  {
    id: 7,
    title: '生死簿古籍修复数字化',
    description: '完成上古时期生死簿古籍修复后数字化，共计1.2万页，采用超高清扫描技术',
    type: '古籍修复',
    time: '3天前',
    operator: '修复专家鲁班',
    icon: 'ToolOutlined',
    avatarColor: '#f5222d',
    tagColor: 'red'
  },
  {
    id: 8,
    title: '多语言OCR识别系统上线',
    description: '新增梵文、藏文、阿拉伯文等15种语言OCR识别功能，支持多语言混合识别',
    type: '功能上线',
    time: '4天前',
    operator: '开发团队',
    icon: 'GlobalOutlined',
    avatarColor: '#faad14',
    tagColor: 'gold'
  },
  {
    id: 9,
    title: '档案数字化质量标准更新',
    description: '发布《地府档案数字化质量标准v3.0》，提升扫描分辨率要求至600DPI',
    type: '标准更新',
    time: '5天前',
    operator: '标准委员会',
    icon: 'FileTextOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 10,
    title: '批量档案去重处理完成',
    description: '利用AI技术完成50万份档案去重处理，发现并处理重复档案1.2万份',
    type: '去重处理',
    time: '6天前',
    operator: '数据处理员孟子',
    icon: 'FilterOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 11,
    title: '档案元数据标准化',
    description: '完成全部数字化档案元数据标准化工作，统一数据格式，提升检索效率',
    type: '标准化',
    time: '1周前',
    operator: '数据管理员韩非',
    icon: 'DatabaseOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 12,
    title: '历史档案抢救性数字化',
    description: '完成濒临损毁的春秋战国时期档案抢救性数字化，挽救珍贵历史资料2.8万页',
    type: '抢救性数字化',
    time: '1周前',
    operator: '抢救团队',
    icon: 'HeartOutlined',
    avatarColor: '#f5222d',
    tagColor: 'red'
  }
])

// 新增：详细扫描统计
const scanStatistics = reactive({
  totalScanned: 1125683,
  todayScanned: 2456,
  weeklyScanned: 16789,
  monthlyScanned: 67543,
  scanQuality: {
    excellent: 89.2,
    good: 8.7,
    fair: 1.8,
    poor: 0.3
  },
  scanTypes: [
    { type: '彩色扫描', count: 456789, percentage: 40.6 },
    { type: '黑白扫描', count: 345678, percentage: 30.7 },
    { type: '灰度扫描', count: 234567, percentage: 20.8 },
    { type: '超高清扫描', count: 88649, percentage: 7.9 }
  ],
  scanDevices: [
    { device: '高速扫描仪A', processed: 234567, efficiency: 95.6 },
    { device: '高速扫描仪B', processed: 198765, efficiency: 92.3 },
    { device: '精密扫描仪C', processed: 156789, efficiency: 98.7 },
    { device: '古籍专用扫描仪', processed: 89456, efficiency: 99.2 }
  ]
})

// 新增：OCR识别统计
const ocrStatistics = reactive({
  totalRecognized: 2.34,
  todayRecognized: 156.7,
  weeklyRecognized: 1023.4,
  monthlyRecognized: 4567.8,
  accuracyTrend: [
    { period: '1月', accuracy: 94.2 },
    { period: '2月', accuracy: 94.8 },
    { period: '3月', accuracy: 95.1 },
    { period: '4月', accuracy: 95.5 },
    { period: '5月', accuracy: 95.9 },
    { period: '6月', accuracy: 96.2 },
    { period: '7月', accuracy: 96.4 },
    { period: '8月', accuracy: 96.6 },
    { period: '9月', accuracy: 96.7 },
    { period: '10月', accuracy: 96.8 },
    { period: '11月', accuracy: 96.8 },
    { period: '12月', accuracy: 96.8 }
  ],
  languageSupport: [
    { language: '古汉语', accuracy: 98.5, processed: 1234567 },
    { language: '现代汉语', accuracy: 99.2, processed: 987654 },
    { language: '文言文', accuracy: 97.8, processed: 567890 },
    { language: '梵文', accuracy: 94.3, processed: 123456 },
    { language: '藏文', accuracy: 92.7, processed: 89012 },
    { language: '阿拉伯文', accuracy: 91.5, processed: 45678 },
    { language: '拉丁文', accuracy: 95.6, processed: 34567 },
    { language: '希腊文', accuracy: 93.4, processed: 23456 }
  ]
})

// 新增：分类统计
const classificationStats = reactive({
  totalCategories: 156,
  totalClassified: 1083567,
  autoClassificationRate: 89.2,
  manualReviewRate: 10.8,
  topCategories: [
    { category: '生死记录', count: 234567, percentage: 21.6 },
    { category: '业力档案', count: 198765, percentage: 18.3 },
    { category: '审判记录', count: 156789, percentage: 14.5 },
    { category: '轮回档案', count: 123456, percentage: 11.4 },
    { category: '功德记录', count: 98765, percentage: 9.1 },
    { category: '修行典籍', count: 76543, percentage: 7.1 },
    { category: '管理文档', count: 54321, percentage: 5.0 },
    { category: '其他', count: 135360, percentage: 12.5 }
  ],
  classificationAccuracy: 96.5,
  processingSpeed: 1567
})

// 新增：标签统计
const tagStatistics = reactive({
  totalTags: 15672,
  activeTags: 12456,
  popularTags: [
    { tag: '生死轮回', usage: 45678, category: '轮回' },
    { tag: '业力评定', usage: 34567, category: '业力' },
    { tag: '审判程序', usage: 23456, category: '审判' },
    { tag: '功德累积', usage: 19876, category: '功德' },
    { tag: '地狱管理', usage: 15432, category: '管理' },
    { tag: '修行指导', usage: 13245, category: '修行' },
    { tag: '转世安排', usage: 11234, category: '轮回' },
    { tag: '救赎计划', usage: 9876, category: '救赎' },
    { tag: '仙官考核', usage: 8765, category: '人事' },
    { tag: '档案管理', usage: 7654, category: '管理' }
  ],
  tagCoverage: 92.3,
  avgTagsPerDoc: 4.2
})

// 方法
const navigateToModule = (path) => {
  router.push(path)
}

const quickScan = () => {
  router.push('/files/digital-archive/scan-management')
}

const quickOCR = () => {
  router.push('/files/digital-archive/ocr-recognition')
}

const quickClassify = () => {
  router.push('/files/digital-archive/classification')
}

const quickTag = () => {
  router.push('/files/digital-archive/tag-setting')
}
</script>

<style lang="scss" scoped>
.digital-archive-container {
  padding: 24px;

  // 页面头部
  .digital-archive-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.scan-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.ocr-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.classify-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.tag-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 进度概览区域
  .progress-overview-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .progress-cards {
      .progress-card {
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(212, 153, 10, 0.2);
        transition: all 0.3s ease;

        .progress-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          .progress-title {
            font-size: 16px;
            font-weight: bold;
            color: $primary-color;
          }

          .progress-percentage {
            font-size: 24px;
            font-weight: bold;
            color: $secondary-color;
          }
        }

        .progress-bar-container {
          margin-bottom: 16px;
        }

        .progress-details {
          .detail-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 14px;

            .detail-label {
              color: $text-secondary;
            }

            .detail-value {
              color: $primary-color;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  // 数字化动态区域
  .digital-dynamics-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .dynamics-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .dynamics-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .dynamics-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .dynamics-meta {
        display: flex;
        gap: 16px;

        .dynamics-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .dynamics-operator {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }

  // 快速操作区域
  .quick-actions-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }

    :deep(.ant-card-head) {
      border-bottom: 1px solid rgba(212, 153, 10, 0.2);
    }

    .ant-btn {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
    }
  }
}
</style>
